<html>
<head>
    <title>透析助手</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.6/css/sm.min.css">
    <link rel="stylesheet" href="__PUBLIC__/css/swiper.css">
    <link rel="stylesheet" href="__PUBLIC__/css/style.css">
    <link rel="stylesheet" href="__PUBLIC__/css/5s.css">
    <link rel="stylesheet" href="__PUBLIC__/css/6m.css">
    <link rel="stylesheet" href="__PUBLIC__/css/iconfont.css">
    <style type="text/css">
        .PopContentText{padding:10px 17px 90px 17px;}
        .PopConTit{float:left;margin-top:0.8rem;height:32px;line-height:32px;}
        .PopContentText-input input{float:left;margin-left:10px;width:auto;height:32px;line-height:32px;}
        .PopConTitDes{color:#999;font-size:14px;}
    </style>
</head>
<body>
    <div class="head">
        <div class="HeadContent">
            <a href="<{:U('Index/index')}>" class="backIndex">
                <i class="iconfont">&#xe605;</i><span>返回</span>
            </a>
            <div class="WeightRecord">
                <div><{$words.drink}></div>
            </div>
            <button class="Btn-circle" type="button" onclick="javascript:$('.Popwindow').show();">
                <span>饮水</span>
                <i class="iconfont">&#xe608;</i>
            </button>
        </div>
    </div>
    <div class="RecordInformation-list">
        <ul class="rank_list">
        <empty name="list">
            <li>暂 无 记 录</li>
        <else />
        <foreach name="list" item="v">
            <li>
                <div class="bg-line"></div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="RecordContent">
                                <div class="RecordTime"><{$v['create_time']}></div>
                                <div class="RecordData"><{$v.vol}>ml</div>
                            </div>
                        </div>
                        <div class="swiper-slide" style="width:20%">
                            <div class="delete" onclick="del('<{$v.id}>',this)">删除</div>
                        </div>
                    </div>
                </div>
            </li>
        </foreach>
        </empty>
        </ul>
    </div>
    <div class="foot">
        <span></span><a href="<{:U('chart')}>">查看曲线<i class="iconfont">&#xe60a;</i></a>
    </div>
    <!-- 增加饮水弹窗开始 -->
    <div class="Popwindow">
        <div class="DinnerTime">
            <div class="DinnerTime-title">记录饮水</div>
            <div class="DrinkList">
                <div>
                    <div class="Drink cup1">
                        <div class="CupName">小茶杯（100ml）</div>
                        <i class="iconfont" onclick="changeWater(-100,this)">&#xe60c;</i>
                        <span>0</span>
                        <i class="iconfont plus" onclick="changeWater(100,this)">&#xe615;</i>
                    </div>
                    <div class="Drink cup2">
                        <div class="CupName">玻璃杯（200ml）</div>
                        <i class="iconfont" onclick="changeWater(-200,this)">&#xe60c;</i>
                        <span>0</span>
                        <i class="iconfont plus" onclick="changeWater(200,this)">&#xe615;</i>
                    </div>
                    <div class="Drink cup3">
                        <div class="CupName">保温杯（400ml）</div>
                        <i class="iconfont" onclick="changeWater(-400,this)">&#xe60c;</i>
                        <span>0</span>
                        <i class="iconfont plus" onclick="changeWater(400,this)">&#xe615;</i>
                    </div>
                    <div class="DrinkNum"><span>0</span>ml</div>
                    <div class="DrinkToday">今日饮水</div>
                </div>
            </div>
            <div class="BtnGroup Btn-Popwindow btn-drink">
                <button class="btn-drop" type="button" onclick="javascript:$('.Popwindow').hide();">取消</button>
                <button class="btn-submit" onclick="save()">确定</button>  
            </div>
        </div>
    </div>
    <!-- 增加饮水弹窗结束 -->
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.7/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='__PUBLIC__/js/swiper.min.js'></script>
<script type='text/javascript' src='__PUBLIC__/js/myjq.js'></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        slidesPerView : 'auto',
        paginationClickable : true,
        spaceBetween : 30
    })
    
    //增减饮水量
    function changeWater(volum,obj){
        //数量处理
        var num,actual_num;
        num = (volum > 0) ? 1 : -1;
        actual_num = parseInt($(obj).siblings('span').text()) + (num);
        if(actual_num < 0){
            actual_num = 0;
            $(obj).siblings('span').text(actual_num);
            return;
        }
        $(obj).siblings('span').text(actual_num);
        //水量处理
        var waterVol = parseInt($('.DrinkNum span').text()) + (volum);
        if(waterVol < 0) waterVol = 0;
        $('.DrinkNum span').text(waterVol);
    }
    
    //保存饮水
    function save(){
        if($('.DrinkNum span').text() == 0){
            $.toast('请添加饮水量');return;
        }
        loadingShow();
        $.post("<{:U('edit')}>",{vol:$('.DrinkNum span').text()},function(res){
            if(res == 'suc'){
                $.toast('记录成功');
                setTimeout("location.reload()",1500);
            }else{
                loadingHide();
                $.toast('记录失败');
            }
        });
    }
    
    //删除一条数据
    function del(id,obj){
        loadingShow();
        $.post("<{:U('del')}>",{id:id},function(res){
            loadingHide();
            if(res=='suc'){
                $.toast('删除成功');
                $(obj).parents('li').remove();
            }else{
                $.toast('删除失败');
            }
        });
    }
    
    //无限加载
    var pageNum=1;
    var page_ajax=true;//加载开关
    $(document).ready(function(){
        $(window).scroll(function(){
            var bot = 70; //bot是底部距离的高度
            if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
                if(page_ajax){
                    page_ajax=false;
                    pageNum++;
                    $.get('<{:U("index")}>&p='+pageNum,function(res){
                        if(res){
                            if(res != 'err'){
                                var goodsStr='';
                                $.each(res,function(i,item){
                                    goodsStr+='<li><div class="bg-line"></div><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><div class="RecordContent"><div class="RecordTime">'+item.create_time+'</div><div class="RecordData">'+item.vol+'ml</div></div></div><div class="swiper-slide" style="width:20%"><div class="delete" onclick="del('+item.id+',this)">删除</div></div></div></div></li>';
                                })
                                $('.rank_list').append(goodsStr);
                                page_ajax=true;
                                
                                //渲染swiper
                                mySwiper = new Swiper('.swiper-container', {
                                    slidesPerView : 'auto',
                                    paginationClickable : true,
                                    spaceBetween : 30
                                });
                            }
                        }
                    },'json');
                }
            }
        });
    });
</script>
</body>
</html>